<template>

  <div id="ConnectInfoAddOrEdit">
    <n-spin :show="show">
      <n-form
          label-placement="left"
          label-width="auto"
          require-mark-placement="right-hanging"
          label-align="left"
      >
        <n-form-item label="类型：">
          <n-select :options="options" :value="connectInfo.type"/>
        </n-form-item>

        <n-form-item label="连接名称：">
          <n-input placeholder="连接名称" v-model:value="connectInfo.connectName" type="text"/>
        </n-form-item>

        <n-form-item label="主机：">
          <n-input placeholder="主机" v-model:value="connectInfo.host"/>
        </n-form-item>
        <n-form-item label="端口：">
          <n-input-number placeholder="端口" v-model:value="connectInfo.port"/>
        </n-form-item>
        <n-form-item label="用户名：">
          <n-input placeholder="用户名" v-model:value="connectInfo.user"/>
        </n-form-item>
        <n-form-item label="密码：">
          <n-input placeholder="密码" type="password" v-model:value="connectInfo.password"/>
        </n-form-item>
        <n-form-item>
          <n-space style="display: flex;justify-content: center;align-items: center;width: 100%;">
            <n-button type="success" @click="testFormConnect('save')">
              保存
            </n-button>
            <n-button type="warning" @click="testFormConnect('test_connect')">
              测试链接
            </n-button>
          </n-space>
        </n-form-item>

      </n-form>

    </n-spin>

  </div>

</template>

<script setup lang="ts">
import {PropType, ref} from 'vue'
import MySqlConnectInfo from "../../../model/mysql/MySqlConnectInfo";
import {testConnect} from '../../../renderer/tree/DataSourceTreeUtils'
import ResultDTO from "../../../model/ResultDTO";
import {NotificationApiInjection} from "naive-ui/es/notification/src/NotificationProvider";
import {useNotification} from "naive-ui";
import {sqliteGetConnectInfoList, sqliteUpdateConnectInfo, sqliteAddConnectInfo} from '../../../renderer/SqliteRenderer'
import {ipcRenderer} from 'electron';
import DispatchEventEnums from "../../../enum/DispatchEventEnums";
import {MessageOptions} from "naive-ui/es/message/src/types";

const notification: NotificationApiInjection = useNotification()
const message = useMessage()

const show = ref(false);
const props = defineProps({
  connectInfo: {
    type: Object as PropType<MySqlConnectInfo>,
    default: () => ({
      connectName: '',
      host: '',
      port: 3306, // 假设3305是默认端口
      user: '',
      password: '',
      type: 'mysql'
    })
  }

})
const testFormConnect = (e) => {
  if ("test_connect" === e) {
    console.log("当前链接信息", props.connectInfo)

    show.value = true;
    testConnect(<MySqlConnectInfo>props.connectInfo).then((res: ResultDTO<any>) => {
      message.success('链接成功');
      show.value = false;

    }).catch(res => {
      let option: MessageOptions = {
        duration: 10000,
        closable: true,
      }
      message.error(res.message, option)
      show.value = false;
    })
  } else if ('save' === e) {
    //更新
    if (props.connectInfo?.id) {
      console.log("当前链接信息", props.connectInfo)
      //保存操作，需要去更新数据库,先去更新数据库，
      sqliteUpdateConnectInfo(<MySqlConnectInfo>props.connectInfo).then((res: ResultDTO<any>) => {
        //数据更新完成后，然后去更新tree节点
        ipcRenderer.send('dispatch-center', [DispatchEventEnums.FRESH_TREE_NODE_EVENT.code,
          JSON.stringify(<MySqlConnectInfo>props.connectInfo)])
        message.success('保存成功');
      }).catch((res: ResultDTO<any>) => {
        notification.info({
          title: '保存失败',
          content: res.message,
          duration: 5000
        })
      })
    } else {
      //新增
      console.log("新增链接信息节点")
      sqliteAddConnectInfo(<MySqlConnectInfo>props.connectInfo).then((res) => {
            //数据更新完成后，然后去更新tree节点
            ipcRenderer.send('dispatch-center', [DispatchEventEnums.FRESH_TREE_NODE_EVENT.code,
              JSON.stringify(<MySqlConnectInfo>props.connectInfo)])
            message.success('保存成功');
            show.value = false;
          }
      ).catch((res) => {

      });

    }

  }

}

const options = ref([
  {
    label: 'mysql',
    value: 'mysql'
  }
])

</script>

<style scoped>
#ConnectInfoAddOrEdit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

</style>